<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Managed IFrame Test</title>
	<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css" />
	<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all.js"></script>
	<script type="text/javascript" src="../../resources/js/multidom.js"></script>
	<script type="text/javascript" src="../../resources/js/miframe.js"></script>
	<script type="text/javascript" src="../../resources/js/mif.js"></script>
  
	<script type="text/javascript" >
		Ext.onReady(function(){
			var vIFrame = new Ext.ux.ManagedIFramePanel({
					id: 'mif'
				,	tbar: [{
							text: 'Load'
						, handler: function() {
								var mif = Ext.getCmp('mif');
								mif.load({
										url: '../../resources/api/transform.php'
									,	params: {
											url: 'http://www.bioline.org.br/abstract?id=fb95003'
										}
									,	timeout: 60
								});

								var task = new Ext.util.DelayedTask(function(){
									mif.getFrame().mask("Analyzing...", 'ext-el-mask-msg x-mask-loading', 'ext-el-mask');
								});
								task.delay(100); 
							}
					}]
				,	height: 350
				,	width: 700
				,	style: "margin:  50px"
				,	autoScroll: true
				,	renderTo: 'test'
				,	title: 'Managed IFrame Loading'
				,	listeners: {
						documentloaded: function(frame) {
							console.log("Document Loaded", frame);
							frame.unmask();
							addIframeListeners(frame);
						}
					}
		});

		addIframeListeners = function(frame) {
			var el = frame.getDoc();
			console.log(frame, el, frame.getXY() );
			el.on('contextmenu', function(e, targetEl){
				console.log("Context Menu", e, this);
				var pXY = this.getXY();
				var xy = e.getXY();
				console.log(xy, pXY, e.getPoint() );
				if(this.menu) this.menu.destroy();
				this.menu = new Ext.menu.Menu({
					items: [{
							text: 'Do Something'
						,	scope: targetEl
						, handler: function(btn, e) {
								console.log("Something", this, btn, e);
							}
					}]
				});
				this.menu.showAt(xy);
			}, frame, {
					delegate: 'span.tt-sciname'
				,	stopEvent: true
			});
			

/*
			el.on('click', function(e,targetEl){
				console.log("Click", e, e.getXY() );																		
				e.preventDefault();
				if(this.menu) this.menu.destroy();
//				e.stopPropagation();
			}, null, {
					stopEvent: false
				,	stopPropagation: false
			});
*/
		}

	});
	</script>
	</head>
	<body>
  	<div id="test"></div>
	</body>
</html>
